import React from 'react';
import { Form, Input, Modal, Radio, Select } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;

@connect(({ commonInfo }) => ({
  commonInfo,
}))
@Form.create()
class RoleOptForm extends React.Component {
  state = {
    departmentVisible: false, // 部门选项是否可见
  };

  static defaultProps = {
    values: {
      appId: 0,
      type: 0,
    },
    isEdit: false,
    handleAdd: () => {},
    handleUpdate: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {};
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'commonInfo/fetchDepartment',
    });
  }

  okHandle = () => {
    const { values, isEdit = false, form, handleAdd, handleUpdate } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      if (isEdit) {
        handleUpdate({
          roleId: values.id,
          ...fieldsValue,
        });
      } else {
        handleAdd(fieldsValue);
      }
    });
  };

  // 选择事件
  onChange = selectInfo => {
    let departmentVisible = false;
    switch (selectInfo.target.value) {
      case 0:
        departmentVisible = false;
        break;
      case 1:
      case 2:
        departmentVisible = true;
        break;
      default:
        departmentVisible = false;
    }

    this.setState({
      departmentVisible,
    });
  };

  render() {
    const {
      isEdit,
      modalVisible,
      handleModalVisible,
      values,
      form,
      commonInfo: { classifyList },
    } = this.props;
    const { departmentVisible } = this.state;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={540}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title={isEdit ? '修改角色信息' : '新增角色信息'}
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, false, values)}
        onOk={this.okHandle}
      >
        <FormItem key="name" {...this.formLayout} label="角色名称">
          {form.getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入角色名称！' }],
            initialValue: values.name,
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem key="code" {...this.formLayout} label="角色编码">
          {form.getFieldDecorator('code', {
            rules: [{ required: true, message: '请输入角色编码！' }],
            initialValue: values.code,
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <Form.Item key="type" {...this.formLayout} label="角色类型">
          {form.getFieldDecorator('type', {
            initialValue: values.type,
          })(
            <Radio.Group>
              <Radio value={0}>普通角色</Radio>
              <Radio value={1}>默认角色</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        {departmentVisible && (
          <FormItem key="department" {...this.formLayout} label="所属部门">
            {form.getFieldDecorator('department', {
              rules: [{ required: true, message: '请选择部门' }],
              initialValue: values.department,
            })(
              <Select
                placeholder="请选择部门"
                optionFilterProp="children"
                style={{ width: '100%' }}
              >
                {classifyList.map(item => (
                  <Select.Option value={item.code} key={item.code}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            )}
          </FormItem>
        )}
      </Modal>
    );
  }
}

export default RoleOptForm;
